<template>
  <div class="register-container">
    <el-card class="register-card">
      <h1>岳麓书院文化知识管理系统</h1>
      <el-form :model="form" ref="formRef" :rules="rules" label-position="left" label-width="80px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" placeholder="设置新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
          <el-input type="password" v-model="form.rePassword" placeholder="再次输入密码"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <el-row :gutter="10">
            <el-col :span="14">
              <el-input v-model="form.captcha" placeholder="输入验证码"></el-input>
            </el-col>
            <el-col :span="10">
              <el-button type="primary" plain @click="sendCaptcha" class="captcha-button">发送验证码</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-button type="primary" @click="onSubmit" class="submit-button">确认修改</el-button>
      </el-form>
      <div style="margin-top: 10px; width: 100px; color: #9499B2" @click="goBack">返回</div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { forgetPassword, getCaptcha, postRegisterService } from '../api/user'
import { useRouter } from 'vue-router'

const router = useRouter()
const form = ref({
  phone: '',
  captcha: '',
  password: '',
  rePassword: ''
})

const formRef = ref(null)

// 校验规则
const rules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,10}$/,
      message: '密码必须是6-10位，包含大小写字母和数字',
      trigger: 'blur'
    }
  ],
  rePassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
}

const sendCaptcha = async () => {
  if (!form.value.phone) {
    ElMessage.error('请先输入手机号')
    return;
  }
  const response = await getCaptcha(form.value.phone)
  if (response.data.code === 1) {
    ElMessage.success('验证码已发送，请耐心等待')
  }

}

const onSubmit = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (form.value.password !== form.value.rePassword) {
        ElMessage.error('两次密码输入不一致。');
        return;
      }
      const response = await forgetPassword({
        phone: form.value.phone,
        password: form.value.password,
        rePassword: form.value.rePassword,
        captcha: form.value.captcha
      })
      if (response.data.code === 1) {
        ElMessage.success('密码修改成功！')
        // 页面跳转
        router.push("/login")
      }
    } else {
      ElMessage.error('请正确填写表单。');
    }
  })
}

const goBack = () => {
  form.value.phone = ''
  form.value.password = ''
  form.value.captcha = ''
  form.value.rePassword = ''
  router.push('/login')
}

</script>

<style scoped>
h1 {
  text-align: center;
  color: #1f4068;
}

.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* background-color: #f5f5f5; */
  background-image: url('../assets/images/background.png');
}

.register-card {
  width: 500px;
  padding: 20px;
}

.el-form-item {
  display: flex;
  justify-content: flex-start;
}

.captcha-button {
  width: 160px;
}

.submit-button {
  width: 100%;
  margin-top: 10px;
  background-color: #1f4068;
}
</style>
